<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="流程名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入参数名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="参数键名" prop="paramKey">
          <el-input
            v-model="queryParams.paramKey"
            placeholder="请输入参数键名"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      
      <el-row :gutter="10" class="mb8">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="toCreateModel">创建模型</el-button>
      </el-row>
      <el-table v-loading="loading" :data="deployList">
        <el-table-column label="ID" prop="id" align="center" />
        <el-table-column label="模型名称" align="center" prop="name" />
        <el-table-column label="模型key" align="center" prop="key" :show-overflow-tooltip="true" />
        <el-table-column label="模型版本" align="center" prop="version" :show-overflow-tooltip="true" />
        <el-table-column label="创建时间" align="center" prop="createTime" >
            <template slot-scope="scope">
                {{ scope.row.createTime }}
            </template>
        </el-table-column>
        <el-table-column label="修改时间" align="center" prop="lastUpdateTime" >
            <template slot-scope="scope">
                {{ scope.row.lastUpdateTime }}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center"  >
            <template slot-scope="scope">
                <el-button
                      size="mini"
                      circle type="success"
                      icon="el-icon-edit"
                      @click="gotoEditPage(scope.row)"
                      v-hasPermi="['system:user:edit']"
              />
              <el-button
                      size="mini"
                      circle type="danger"
                      icon="el-icon-delete"
                      @click="handleDelete(scope.row)"
                      v-hasPermi="['system:user:remove']"
              />
              <el-button
                      size="mini"
                      circle 
                      icon="el-icon-check"
                      @click="handlePublish(scope.row)"
                      v-hasPermi="['system:user:remove']"
              />
            
            </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
    </div>
  </template>
  
  <script>
  import { getToken } from "@/utils/auth";
  import {modelList, deployProcess, removeProcess, exportProcess} from "@/api/workflow/model"
  
  export default {
    name: "Config",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 参数表格数据
        deployList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 类型数据字典
        typeOptions: [],
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          paramName: undefined,
          paramKey: undefined,
          paramType: undefined
        }
      };
    },
    computed: {
      headers() {
        return {
          'Authorization': getToken()
        }
      }
    },
    created() {
      this.getList();
  
    },
    methods: {
      /** 查询参数列表 */
      getList() {
        this.loading = true;
        modelList(this.queryParams).then(response => {
            this.deployList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          paramName: undefined,
          paramKey: undefined,
          paramValue: undefined,
          paramType: "Y",
          remark: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      gotoEditPage(row){
        //跳转到编辑页面
        this.$router.push({path:'/workflow/editWorkFlow',query:{modelId:row.id}})
      },
      handleDelete(row){
        removeProcess(row.id).then(resp=>{
          alert("删除成功")
                // this.$message({ message: '发布成功', type: 'success' });
          this.getList()
        })
        // this.$confirm('确定要删除['+row.id+']流程吗?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
            
        // })
        
      },
      handlePublish(row){
        deployProcess(row.id).then(resp=>{
                // this.$message({ message: '发布成功', type: 'success' });
                alert("发布成功")
                this.getList()
            })
        // this.$confirm('确定要部署名称为['+row.name+']的流程吗?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
            
        // })
        
      },
      toCreateModel(){//创建模型
        //跳转到编辑页面
        this.$router.push({path:'/workflow/editWorkFlow'})
      }
    }
  };
  </script>
  